<!--
 * @description: 
 * @Date: 2022-10-10 19:52:00
 * @LastEditTime: 2022-11-09 19:12:12
-->
<template>
  <div class="mouseMenu" :style="ps" v-if="show" @mousedown.stop @contextmenu.prevent>
    <!-- @mousedown.stop 阻止菜单内时间冒泡到父级，用来控制点击区域外关闭 -->
    <div class="mouseItem mhover" @click.stop="openLink" v-if="type == 'icon'">
      <img src="../assets/svg/open.svg" />
      <span>新标签打开</span>
    </div>
    <div class="mouseItem" v-if="type == 'component'">
      <img src="@/assets/svg/layout.svg" />
      <span>布局</span>
    </div>
    <div class="layoutSet" v-if="type == 'component'">
      <div @click="layout('2x4')">2x4</div>
      <div @click="layout('2x2')">2x2</div>
      <div @click="layout('1x1')">1x1</div>
    </div>
    <div class="mouseItem mhover" v-if="type == 'icon'" @click="edit">
      <img src="../assets/svg/edit.svg" />
      <span>编辑</span>
    </div>
    <div @click.stop="editAll" class="mouseItem mhover">
      <img src="../assets/svg/edit.svg" />
      <span>批量编辑</span>
    </div>
    <div class="mouseItem mhover" @click.stop="del">
      <img src="../assets/svg/del.svg" />
      <span>删除</span>
    </div>
  </div>
</template>
<script setup>
import { reactive, onUnmounted, ref } from "vue";
import emitter from "../util/emitter";
import { useStore } from "vuex";
import redirectUrl, { redirectId } from "../util/href";
import ComponentRouter from "../util/ComponentRouter";
const store = useStore();
const show = ref(false);
const type = ref("");
let EventContext = {};
let eventData = ref({});
const ps = reactive({
  top: "0px",
  left: "0px",
});
//删除图标
const del = () => {
  store.commit("delLink", eventData.id);
  show.value = false;
  EventContext?.call && EventContext?.call();
};
const edit = () => {
  ComponentRouter["tab://addicon"]({ data: eventData });
  show.value = false;
};
//编辑所有
const editAll = () => {
  store.state.editStatus = true;
  show.value = false;
};
//修改布局
const layout = (lay) => {
  eventData.size = lay;
  store.commit("setLink", eventData);
  emitter.emit("hotSearch", eventData);
  show.value = false;
};
const openLink = () => {
  redirectUrl(eventData.url, true);
  show.value = false;
};
//打开菜单
const mousePs = (event) => {
  ps.top = event.top + "px";
  ps.left = event.left + "px";
  eventData = event.data;
  EventContext = event;
  type.value = eventData.type;
  show.value = true;
};
//鼠标区域外点击的事件
const closeEvent = (event) => {
  if (show.value) {
    //如果开启了，点击位置不在菜单内则关闭
    show.value = false;
  }
};

window.addEventListener("mousedown", closeEvent);
emitter.on("mousePs", mousePs);
onUnmounted(() => {
  window.removeEventListener("mousedown", closeEvent);
  emitter.off("mousePs", mousePs);
});
</script>
<style lang="less">
.layoutSet {
  padding: 0px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
  margin-bottom: 10px;

  > div {
    cursor: pointer;
    width: 100%;
    height: 25px;
    line-height: 25px;
    padding: 0px 10px;
    font-size: 13px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.644);

    &:hover {
      background-color: #fff;
    }
  }
}

.mouseMenu {
  position: fixed;
  width: 120px;
  // height: 200px;
  z-index: 999;
  background-color: transparent;
  border-radius: 3px 10px 10px;
  padding: 10px 0px;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 3px 10px 10px;
    left: 0;
    background: rgba(243, 243, 243, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(40px);
    z-index: -1;
  }

  .mhover:hover {
    background-color: #fff;
  }

  .mouseItem {
    padding: 0px 10px;
    display: flex;
    align-items: center;
    min-height: 35px;
    cursor: pointer;

    > img {
      width: 15px;
      height: 15px;
    }

    > span {
      margin-left: 5px;
      font-size: 13px;
    }
  }
}
</style>
